<template>
	<xn-form-container
		width="100%"
		:closable="false"
		:get-container="false"
		:style="{ position: 'absolute' }"
		:body-style="{ background: '#f0f2f5' }"
		:visible="visible"
		:destroy-on-close="true"
		@close="onClose"
	>
		<template #title>
			<span>工程订单详情</span>
			<a-button style="float: right" @click="onClose">返回</a-button>
		</template>

		<a-tabs>
			<a-table-pane key="1" tab="详细信息">
				<a-card :bordered="false">
					<a-row :gutter="24" style="margin-bottom: 12px">
						<a-col :span="6">
							<a-row>
								<a-col :span="7">
									<span>销售方式:</span>
								</a-col>
								<a-col :span="17">
									<span>{{ formData.saleMethod }}</span>
								</a-col>
							</a-row>
						</a-col>
						<a-col :span="6">
							<a-row>
								<a-col :span="7">
									<span>项目编号:</span>
								</a-col>
								<a-col :span="17">
									<span>{{ formData.contractId }}</span>
								</a-col>
							</a-row>
						</a-col>
						<a-col :span="6">
							<a-row>
								<a-col :span="7">
									<span>项目名称:</span>
								</a-col>
								<a-col :span="17">
									<span>{{ formData.contractName }}</span>
								</a-col>
							</a-row>
						</a-col>
						<a-col :span="6">
							<a-row>
								<a-col :span="7">
									<span>客户名称:</span>
								</a-col>
								<a-col :span="17">
									<span>{{ formData.custName }}</span>
								</a-col>
							</a-row>
						</a-col>
					</a-row>
					<a-row :gutter="24" style="margin-bottom: 12px">
						<a-col :span="6">
							<a-row>
								<a-col :span="7">
									<span>备注:</span>
								</a-col>
								<a-col :span="17">
									<span>{{ formData.remark }}</span>
								</a-col>
							</a-row>
						</a-col>
						<a-col :span="6">
							<a-row>
								<a-col :span="7">
									<span>操作人:</span>
								</a-col>
								<a-col :span="17">
									<span>{{ bizTool.obtainCreateUser(formData) }}</span>
								</a-col>
							</a-row>
						</a-col>

						<a-col :span="6">
							<a-row>
								<a-col :span="7">
									<span>操作时间:</span>
								</a-col>
								<a-col :span="17">
									<span>{{ bizTool.obtainCreateTime(formData) }}</span>
								</a-col>
							</a-row>
						</a-col>
					</a-row>

					<a-row :gutter="24">
						<a-col :span="6">
							<a-row style="color: red">
								<a-col :span="7">
									<span>审核状态:</span>
								</a-col>
								<a-col :span="17">
									<span>{{ formData.approveStatus }}</span>
								</a-col>
							</a-row>
						</a-col>
						<a-col :span="6" v-if="formData.approveUserName">
							<a-row>
								<a-col :span="7">
									<span>审核人:</span>
								</a-col>
								<a-col :span="17">
									<span>{{ bizTool.obtainApprover(formData) }}</span>
								</a-col>
							</a-row>
						</a-col>
						<a-col :span="6" v-if="formData.approveTime">
							<a-row>
								<a-col :span="7">
									<span>审核时间:</span>
								</a-col>
								<a-col :span="17">
									<span>{{ bizTool.obtainApproverTime(formData) }}</span>
								</a-col>
							</a-row>
						</a-col>

						<a-col :span="6" v-if="formData.refuseReason">
							<a-row>
								<a-col :span="7">
									<span>拒绝理由:</span>
								</a-col>
								<a-col :span="17">
									<span>{{ formData.refuseReason }}</span>
								</a-col>
							</a-row>
						</a-col>
					</a-row>
				</a-card>
				<a-row>
					<a-col :span="24">
						<a-row>
							<a-button class="childAddButton"> 商品明细 </a-button>
						</a-row>
						<a-table
							:pagination="false"
							:columns="goodsColumns"
							:data-source="formData.saleOrderDetailAddParamList"
							:scroll="{ x: 1000 }"
						>
							<template #bodyCell="{ index, record, column }">
								<template v-if="column.dataIndex === 'index'">
									<span>{{ index + 1 }}</span>
								</template>

								<template v-if="column.dataIndex === 'taxRate'">
									<a-input disabled :style="{ width: column.width }" v-model:value="record.taxRate" />
								</template>

								<template v-if="column.dataIndex === 'saleNum'">
									<a-input disabled :style="{ width: column.width }" v-model:value="record.saleNum" />
								</template>

								<template v-if="column.dataIndex === 'taxPrice'">
									<a-input disabled :style="{ width: column.width }" v-model:value="record.taxPrice" />
								</template>

								<template v-if="column.dataIndex === 'noTaxPrice'">
									<a-input disabled :style="{ width: column.width }" v-model:value="record.noTaxPrice" />
								</template>

								<template v-if="column.dataIndex === 'remark'">
									<a-input :style="{ width: column.width }" v-model:value="record.remark" />
								</template>
							</template>
						</a-table>
					</a-col>
				</a-row>

				<div style="margin-top: 15px">
					<span style="color: #333; font-size: 16px; font-weight: 600">合计</span>
				</div>
				<a-row :gutter="24" style="margin-bottom: 50px; margin-top: 15px; margin-left: 20px">
					<a-col :span="6">
						<div style="margin-right: 12px; display: inline-block">
							<span>销售数量:</span>
						</div>
						<a-input style="width: 50%; border-radius: 5px" disabled placeholder="0" v-model:value="saleNum" />
					</a-col>
					<a-col :span="6">
						<div style="margin-right: 12px; display: inline-block">
							<span>含税总金额</span>
						</div>
						<a-input style="width: 50%; border-radius: 5px" disabled placeholder="0" v-model:value="taxAmount" />
					</a-col>
					<a-col :span="6">
						<div style="margin-right: 12px; display: inline-block">
							<span>不含税总金额</span>
						</div>
						<a-input style="width: 50%; border-radius: 5px" disabled placeholder="0" v-model:value="noTaxAmount" />
					</a-col>
				</a-row>
			</a-table-pane>
			<a-tab-pane key="2" tab="审核流程">
				<a-card :bordered="false">
					<taskInfo :id="formData.processId"> </taskInfo>
				</a-card>
			</a-tab-pane>
		</a-tabs>

		<a-row style="margin-top: 50px" justify="center">
			<a-space size="middle">
				<a-button v-if="hasPerm('PURCHASE_ORDER_PRINT')" type="primary" ghost style="width: 100px; border-radius: 5px"
					>打印</a-button
				>
				<a-button style="width: 100px; border-radius: 5px" @click="onClose">关闭</a-button>
			</a-space>
		</a-row>
	</xn-form-container>
</template>

<script setup name="dbsForm">
	import bizTool from '@/utils/bizTool'
	import taskInfo from '@/components/Task/info.vue'
	import saleorderApi from '@/api/sale/order/saleorderApi'

	// 定义emit事件
	//PROCUREMENT_PARTNERS
	const emit = defineEmits({ successful: null })
	// 默认是关闭状态
	const visible = ref(false)
	const productsRef = ref()
	const formRef = ref()
	const customerRef = ref()
	const proinfoRef = ref()

	// 表单数据，也就是默认给一些数据
	const formData = ref({})

	const saleNum = ref(0)
	const taxAmount = ref(0)
	const noTaxAmount = ref(0)

	// 打开抽屉
	const onOpen = (record) => {
		visible.value = true
		formData.value = {}
		saleNum.value = record.saleNum
		noTaxAmount.value = record.noTaxAmount
		taxAmount.value = record.taxAmount
		formData.value = { ...record }
		loadDetail(record)
	}

	// 关闭抽屉
	const onClose = () => {
		visible.value = false
	}

	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		onOpen
	})

	const loadDetail = (record) => {
		saleorderApi
			.detail({
				id: record.id
			})
			.then((res) => {
				let detailList = res.proSaleOrderDetailList
				detailList.forEach((it) => {
					it['remark'] = ''
					it['id'] = it['materialId']
					it['key'] = it['materialId']
				})
				formData.value.saleOrderDetailAddParamList = detailList
			})
			.catch(() => {})
	}

	const goodsColumns = [
		{
			title: '序号',
			width: 80,
			dataIndex: 'index',
			align: 'center'
		},
		{
			title: '商品编号',
			width: 120,
			dataIndex: 'code',
			align: 'center',
			ellipsis: true
		},
		{
			title: '商品名称',
			dataIndex: 'name',
			width: 180,
			align: 'center',
			ellipsis: true
		},
		{
			title: '单位',
			dataIndex: 'unit',
			width: 100,
			align: 'center'
		},
		{
			title: '规格型号',
			dataIndex: 'spec',
			width: 120,
			align: 'center'
		},
		{
			title: '领料出库数量',
			dataIndex: 'saleNum',
			width: 120,
			align: 'center'
		},
		{
			title: '税率',
			dataIndex: 'taxRate',
			width: 120,
			align: 'center'
		},
		{
			title: '含税金额',
			dataIndex: 'taxPrice',
			width: 120,
			align: 'center'
		},
		{
			title: '不含税金额',
			dataIndex: 'noTaxPrice',
			width: 140,
			align: 'center'
		},
		{
			title: '备注',
			dataIndex: 'remark',
			width: 200,
			align: 'center'
		}
	]
</script>

<style scoped :type="less">
	.childAddButton {
		margin-bottom: 12px;
		margin-top: 12px;
	}
</style>
